<template>
    <div>
        <div class="formLayout createEquity">
            <el-row class="rows basic">
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="category">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            权益分类
                        </label>
                        <el-select size="small" class="input-cont" v-model="category" placeholder="请选择级别">
                            <el-option label="活动特权" value="活动特权"></el-option>
                            <el-option label="消费特权" value="消费特权"></el-option>
                        </el-select>
                        <!-- <el-input class="input-cont" placeholder="请输入内容"></el-input> -->
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="name">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            权益名称
                        </label>
                        <el-input size="small" class="input-cont" placeholder="请输入权益名称" v-model="name"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="description">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            权益说明
                        </label>
                        <el-input size="small" v-model="description" class="input-cont" placeholder="请输入权益说明"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            已拥有状态图
                        </label>
                        <div class="detialCell upload" v-if="isStatusUpBtn">
                            <p>+</p>
                            <input class="upfile" type="file" @change="upfileChange($event,1)">
                        </div>
                         <div class="showImg" v-if="isStatus">
                            <img src="@/assets/img/icon_delete.png" class="deleteImg" @click="deleteImg(1)" />
                            <img :src='onPictureUrl' class="uploadImg" />
                        </div>
                        <div class="msgStatus">{{upLoadStatus}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            未拥有状态图
                        </label>
                        <div class="detialCell upload" v-if="isNotStatusUpBtn">
                            <p>+</p>
                            <input class="upfile" type="file" @change="upfileChange($event,2)">
                        </div>
                         <div class="showImg" v-if="isNotStatus">
                            <img src="@/assets/img/icon_delete.png" class="deleteImg" @click="deleteImg(2)" />
                            <img :src='offPictureUrl' class="uploadImg" />
                        </div>
                        <div class="msgStatus">{{upLoadStatus}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="width:75%">
                    <div class="items" ref="detailsUrl">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            详情链接
                        </label>
                        <el-input size="small" v-model="detailsUrl" class="input-cont" placeholder="请输入详情链接"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            状态
                        </label>
                        <el-radio-group v-model="status">
                            <el-radio :label="true">启用</el-radio>
                            <el-radio :label="false">禁用</el-radio>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
            <div class="formBtnList">
                <button class="sureBtn" @click="sureBtn">保存</button>
                <button class="cancelBtn" @click="toCancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import { addRights, editRights, getInfos } from './axios.js'
import _axios from '@/tool/http.js'
export default {
    name:'equity',
    data(){
        return{
            isStatus:false,//已拥有状态
            isNotStatus:false,//未拥有状态
            isStatusUpBtn:true,//已拥有状态
            isNotStatusUpBtn:true,//未拥有状态
            upLoadStatus:'',

            category:'',//权限分类
            name:'',
            description:'',
            detailsUrl:'',//详情链接
            offPictureUrl:'',//未拥有状态图
            onPictureUrl:'',//拥有状态图
            status:'',
            subData: ''//编辑时缓存的旧数据
        }
    },
    props: ['type'],
    methods:{
        toCancel(){
            this.$router.replace({name:'memberLevel'})
        },
        //点击上传按钮
        upfileChange(el,num){
            var fileObj = el.target.files[0];
            var fileSize = fileObj.size;
            if(fileSize/1024/1024 > 2){
                //this.upLoadStatus = '图片大小不能超过2M'
                this.$message({
                    message: '图片大小不能超过2M',
                    type: 'warning'
                });
                return
            }else{
                var form = new FormData();
                form.append("file", fileObj);
                form.append("fileType", 'IMG');
                this.uploadImg(this,form,num);
            }
        },
        //上传图片
        uploadImg(that,formData,num) {
            that.$ajax({
                method: 'post',
                url: api.domain + '/base/file/uploadOne',
                data: formData
            }).then((res)=>{
                var data = res.data;
                if(data.status == 200){
                    switch(num)
                    {
                        case 1:
                            that.onPictureUrl = data.result.url;//已拥有
                            that.isStatus = true;
                            that.isStatusUpBtn = false
                            break;
                        case 2:
                            this.offPictureUrl = data.result.url;//未拥有
                            that.isNotStatus = true;
                            that.isNotStatusUpBtn = false
                            break;
                    }
                    that.$message({
                        message: '图片上传成功',
                        type: 'success'
                    });
                }
            }).catch((err) => {
                console.log('没成功！死命上传',err);
                that.$message({
                    message: '图片上传失败',
                    type: 'warning'
                });
            })
        },
        //删除图片
        deleteImg(num){
            switch(num)
            {
                case 1:
                    this.isStatusUpBtn = true;
                    this.isStatus = false;
                    this.onPictureUrl = '';
                    break;
                case 2:
                    this.isNotStatusUpBtn = true;
                    this.isNotStatus = false;
                    this.offPictureUrl = '';
                    break;
            }
        },
        // 表单验证
        validateData() {
            let regExp = /^[ ]*$/
            let pass = true
            regExp.test(this.category) && (pass = false)
            regExp.test(this.name) && (pass = false)
            regExp.test(this.description) && (pass = false) 
            regExp.test(this.detailsUrl) && (pass = false)
            regExp.test(this.category) ? this.$refs.category.classList.add('qxz_redInput') : this.$refs.category.classList.remove('qxz_redInput')
            regExp.test(this.name) ? this.$refs.name.classList.add('qxz_redInput') : this.$refs.name.classList.remove('qxz_redInput')
            regExp.test(this.description) ? this.$refs.description.classList.add('qxz_redInput') : this.$refs.description.classList.remove('qxz_redInput')
            regExp.test(this.detailsUrl) ? this.$refs.detailsUrl.classList.add('qxz_redInput') : this.$refs.detailsUrl.classList.remove('qxz_redInput')
            regExp.test(this.status) && (pass = false)
            !this.onPictureUrl.length && (pass = false)
            !this.offPictureUrl.length && (pass = false)
            regExp.test(this.status) && this.$message({
                message: '未勾选状态',
                type: 'warning'
            })
            !this.offPictureUrl.length && this.$message({
                message: '未上传未拥有状态图',
                type: 'warning'
            })
            !this.onPictureUrl.length && this.$message({
                message: '未上传已拥有状态图',
                type: 'warning'
            })
            return pass
        },
        //保存
        sureBtn(){
            if(!this.validateData()) {
                this.$message({
                    message: '内容不能为空',
                    type: 'warning'
                })
                return
            }
            var formObj = {
                category: this.category,
                name: this.name,
                description: this.description,
                offPictureUrl: this.offPictureUrl,
                onPictureUrl: this.onPictureUrl,
                detailsUrl: this.detailsUrl,
                status: this.status
            }
            console.log('编辑formObj',formObj)
            // 编辑
            let pass = false
            this.type === 'edit' && Object.keys(formObj).map(ele => {
                formObj[ele] != this.subData[ele] && (pass = true)
            })
            !pass && this.$message({
                type: 'warning',
                message: '没有修改，无需保存'
            })
            this.type === 'edit' && (formObj.id = this.subData.id)
            this.type === 'edit' && pass && editRights(formObj).then((res)=>{
                if(res.data.status == 200){
                    this.$message({
                        message: '编辑权益成功',
                        type: 'success'
                    });
                    this.successCb()
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
            // 新增
            this.type === 'create' && addRights(formObj).then(res => {
                if(res.data.status == 200){
                    this.$message({
                        message: '新建权益成功',
                        type: 'success'
                    });
                    this.clearInput()
                    this.successCb()
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 新增、编辑成功的回调
        successCb() {
            this.$router.replace({name: 'memberLevel'})
        },
        clearInput() {
            this.category = ''
            this.name = ''
            this.description = ''
            this.detailsUrl = ''
            this.status = ''
            this.offPictureUrl = ''
            this.onPictureUrl = ''
            this.isStatus = false//已拥有状态
            this.isNotStatus = false//未拥有状态
            this.isStatusUpBtn = true//已拥有状态
            this.isNotStatusUpBtn = true//未拥有状态
        },
        // 编辑回显
        fillData() {
            let query = this.$route.query;
            query && getInfos(query.key).then(res => {
                if(res.data.status === 200) {
                    let result = res.data.result;
                    this.subData = result;
                    this.category = result.category;
                    this.name = result.name;
                    this.description = result.description;
                    this.detailsUrl = result.detailsUrl;
                    this.status = result.status;
                    result.onPictureUrl && (this.isStatus = true);
                    result.onPictureUrl && (this.isStatusUpBtn = false);
                    result.onPictureUrl && (this.onPictureUrl = result.onPictureUrl);
                    
                    result.offPictureUrl && (this.isNotStatus = true);
                    result.offPictureUrl && (this.isNotStatusUpBtn = false);
                    result.offPictureUrl && (this.offPictureUrl = result.offPictureUrl);
                }else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        }
    },
    activated() {
        this.type === 'edit' && this.fillData()
    },
    created(){
        this.type === 'edit' && this.fillData()
    }
}
</script>

<style>
@import '../../components/css/viewCommon.css';

.el-upload--picture-card{
    width:80px;
    height: 80px;
    line-height: 80px;
    border:1px #ddd solid;
    display: inline-block;
}
.toStyle .el-form-item__error{
    top: 80px;
}
.el-radio__input.is-checked .el-radio__inner{
    border-color: #7e6b5a;
    background: #7e6b5a;
}
.el-radio__input.is-checked+.el-radio__label{
    color: #7e6b5a
}
</style>

<style scoped>
.formLayout{
    margin: 16px;
    background-color: #fff;
    height: 100%;
    overflow: auto;
    padding: 24px;
    border-radius: 8px;
}
.formLayout .el-row{
    margin-bottom: 16px;
}
.formBtnList{
    margin-top:120px;
    display: flex;
    justify-content: center;
}
.formBtnList button{
    width: 120px;
	height: 40px;
	border-radius: 20px;
    border:0;
    color:#fff;
    margin:0 8px
}
.formBtnList button:hover{
    cursor: pointer;
}
.cancelBtn{
    background-color:#222
}
.sureBtn{
    background-color:#7e6b5a
}
/*上传图片*/
.upfile:hover{
    cursor: pointer;
}
.createEquity .detialCell{
    width:80px;
    height:80px;
    font-size:14px;
    border: 1px solid #bbb;
    line-height: 1;
    cursor: pointer;
    margin-left: 6px;
    color:#bbb;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing:border-box;
    cursor: pointer;
}
.createEquity .detialCell p{
    font-size: 4rem;
}
.createEquity .upfile{
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
    
}
.createEquity .showImg{
    width:80px;
    height:80px;
    position:relative;
}
.createEquity .showImg .deleteImg{
    position: absolute;
    right: -7px;
    top: -7px;
}
.createEquity .showImg .deleteImg:hover{
    cursor: pointer;
}
.createEquity .showImg .uploadImg{
    width:100%;
    height:100%;
}
.createEquity .msgStatus{
    font-size:12px;
    color:red
}
</style>
